<template>
  <div class="service-box">
    <div class="serve">
      <div class="top">
        <p>官网服务</p>
        <span>查看更多 ></span>
      </div>
      <div class="details">
        <div>
          <span class="iconfont icon-duanxinxiaoxixinxi"></span>
          <p>售后服务</p>
        </div>
        <div>
          <span class="iconfont icon-wangdianfuwu"></span>
          <p>售后网点</p>
        </div>
        <div>
          <span class="iconfont icon-zonglei_anzhuangjiexian"></span>
          <p>安装服务</p>
        </div>
        <div>
          <span class="iconfont icon-kefu"></span>
          <p>我的客服</p>
        </div>
        <div>
          <span class="iconfont icon-yijiuhuanxintubiao03"></span>
          <p>以旧换新</p>
        </div>
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xiaomixinLogo"></use>
          </svg>
          <p>小米之家</p>
        </div>
        <div>
          <span class="iconfont icon-jiage"></span>
          <p>维修价格</p>
        </div>
        <div>
          <span class="iconfont icon-aixin"></span>
          <p>MiCare</p>
        </div>
      </div>
    </div>
    <div class="tool">
      <div class="top">
        <p>我的工具</p>
        <span>查看更多 ></span>
      </div>
      <div class="details">
        <div>
          <span class="iconfont icon-a-shoujichongzhi2x"></span>
          <p>手机充值</p>
        </div>
        <div>
          <span class="iconfont icon-leimubangonghaocai"></span>
          <p>耗材服务</p>
        </div>
        <div>
          <span class="iconfont icon-qiyexiangqing_qiye"></span>
          <p>企业购</p>
        </div>
        <div>
          <span class="iconfont icon-jiaoyu"></span>
          <p>教育优惠</p>
        </div>
       
      </div>
    </div>
  </div>
</template>

<script>
import '../../assets/xiaomi-iconfont/iconfont.js';
export default {
  name: "service",
};
</script>

<style scoped>
.icon {
  width: 1.8em;
  height: 1.8em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
@import url(../../assets/xiaomi-iconfont/iconfont.css);
.service-box {
  box-sizing: border-box;
  padding: 0 0.12rem;
  margin-top: 0.13rem;
}
.serve {
  height: 1.92rem;
  background-color: #fff;
  border-radius: 0.04rem;
  overflow: hidden;
}
.top {
  display: flex;
  justify-content: space-between;
  margin: 0.15rem 0;
}
.top p {
  font-size: 0.14rem;
  font-weight: bold;
  margin-left: 0.16rem;
}

.top span {
  font-size: 0.12rem;
  color: #a9a9a9;
  margin-right: 0.11rem;
}

.details {
  display: flex;
  flex-wrap: wrap;
  align-items: space-around;
}
.details div {
  height: 0.49rem;
  width: 25%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.2rem;
}
.details div p {
  font-size: 0.12rem;
}
.details div .iconfont {
  font-size: 0.24rem;
}
.details div .icon-duanxinxiaoxixinxi {
  color: #35c165;
}
.details div .icon-wangdianfuwu {
  color: #469fef;
}
.details div .icon-zonglei_anzhuangjiexian {
  color: #f36946;
}
.details div .icon-kefu {
  color: #f59f12;
}
.details div .icon-yijiuhuanxintubiao03 {
  color: #44c2b4;
}
.details div .icon-jiage {
  color: #f4a31b;
}
.details div .icon-aixin {
  color: #62a9ef;
}
.details div .icon-a-shoujichongzhi2x {
  color: #48a1f0;
}
.details div .icon-leimubangonghaocai {
  color: #f2704c;
}
.details div .icon-qiyexiangqing_qiye {
  color: #8a6cfe;
}
.details div .icon-jiaoyu {
  color: #6799f6;
}
.tool {
  height: 1.19rem;
  background-color: #fff;
  border-radius: 0.04rem;
  margin-top: 0.13rem;
  overflow: hidden;
}
</style>
